<template>
	<el-dialog title="查看租期" :visible.sync="dialogVisible" width="1000px">
		<el-table :data="tableData" border>
			<el-table-column label="订单" prop="trade_no" width="120"></el-table-column>
			<el-table-column align="center" label="期数" width="80">
				<template slot-scope="scope">
					<span>{{scope.row.which_period}}/{{scope.row.month_total}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="租期" width="120">
				<template slot-scope="scope">
					<span>{{scope.row.begin_time}} 至 {{scope.row.end_time}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="租金" width="120">
				<template slot-scope="scope">
					<span>￥{{scope.row.rent}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="状态" width="100">
				<template slot-scope="scope">
					<el-tag
						:type="scope.row.status==0||scope.row.status==4?'':'success'">{{scope.row.status==1?'已支付':scope.row.status==2?'已退款':scope.row.status==3?'已买断':scope.row.status==4?'已逾期':scope.row.status==5?'线下支付':'未支付'}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付时间" prop="pay_time" width="100"></el-table-column>
			<el-table-column align="center" label="预计扣款日" prop="begin_time" width="100"></el-table-column>
			<el-table-column align="center" label="流水号" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.pay_time?scope.row.alipay_trade_no:''}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="自动扣款功能">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.withhold_status" active-color="#2993FF" inactive-color="#666666"
						:active-value="1" :inactive-value="2" @change="switchChange(scope.row)">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column fixed="right" align="center" label="操作" width="180">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="viewLog(scope.row)">查看记录</el-button>
					<el-button v-if="scope.row.is_withhold==1&&scope.row.pay_type!=1&&$hasMethod('#withhold')" type="warning"
						size="mini" @click="withholdItem(scope.row)">发起代扣</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="dialogVisible=false">关闭</el-button>
		</div>
		<deduct-log ref="deductLog" :order-no="selectedItem.trade_no" :lease-id="selectedItem.id"></deduct-log>
	</el-dialog>
</template>

<script>
	import {
		getLease
	} from "@/api/order";
	import {
		manualWithholding,
		withholdSwitch
	} from "@/api/finance";
	import deductLog from "./deductLog";
	export default {
		props: ['orderId'],
		components: {
			deductLog
		},
		data() {
			return {
				dialogVisible: false,
				tableData: [],
				selectedItem: {}
			};
		},
		methods: {
			switchChange(row) {
				withholdSwitch({
					orderId: row.order_id,
					leaseId: row.id,
					withholdStatus: row.withhold_status,
				}).then(res => {
					this.$parent.getList(true);
				})
			},
			viewLog(row) {
				this.selectedItem = {
					...row
				}
				this.$refs.deductLog.dialogVisible = true;
			},
			withholdItem(row) {
				console.log('row2', row)
				this.$confirm("您确定要发起代扣吗？", "发起代扣", {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					manualWithholding({
						orderId: row.order_id,
						leaseId: row.id
					}).then(res => {
						setTimeout(() => {
							this.$parent.getList(true);
						}, 1000);
					})
				}).catch(() => {});
			}
		},
		watch: {
			dialogVisible(val) {
				if (val) {
					getLease(this.orderId).then(res => {
						this.tableData = res || [];
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.el-dialog__body {
		max-height: 650px;
		overflow: auto;
	}
</style>